// 封装一个方法，实现确认框提示效果
import { createVNode, render, ref } from 'vue';
import Confirm from './confirm.vue';

// 动态创建一个DOM容器
const container = document.createElement('div');
container.setAttribute('class', 'confirm-container');
document.body.appendChild(container);

/**
 * 确认弹窗
 * @param {Object} params
 * @param {String} [params.title]
 * @param {String} params.text - 内容
 * @param {"info"|"hint"|"error"|"success"} [params.type] - 类型
 * @param {String} [params.cancelText] - 取消按钮文字
 * @param {String} [params.submitText] - 确定按钮文字
 * @param {Boolean} [params.iconShow]
 * @param {Boolean} [params.showClose]
 * @param {Boolean} [params.showCancelButton]
 * @param {Boolean} [params.showHeader]
 * @param {Function} [params.onOk] - 点击确定执行的方法，在弹窗关闭和.then之前
 * @param {Function} [params.onCancel] -点击取消执行的方法 在弹窗关闭和.catch之前
 * @param {Boolean} [params.confirmLoading] -按钮的loading
 * @param {Boolean} [params.showFooter] -是否显示底部footer区域
 */

export default function ({
  title,
  text,
  type,
  cancelText,
  submitText,
  iconShow,
  showClose,
  showCancelButton,
  showHeader,
  onOk,
  onCancel,
  confirmLoading,
  showFooter
}) {
  return new Promise((resolve, reject) => {
    // 如果想让then触发，需要调用resolve：点击确认按钮触发
    // 如果想让catch触发，需要调用reject：点击取消按钮触发
    // 点击确认按钮
    confirmLoading = ref(Boolean(confirmLoading));
    const submitCallback = async () => {
      if (typeof onOk === 'function') {
        confirmLoading.value = true;
        try {
          await onOk();
          render(null, container);
          resolve();
        } catch (error) {}
        // 销毁确认框
        confirmLoading.value = false;
      } else {
        render(null, container);
        resolve();
      }
    };
    // 点击取消按钮
    const cancelCallback = async () => {
      if (typeof onCancel === 'function') {
        confirmLoading.value = true;
        try {
          await onCancel();
          // 销毁确认框
          render(null, container);
          reject(new Error('cancel'));
        } catch (error) {}
        // 销毁确认框
        confirmLoading.value = false;
      } else {
        // 销毁确认框
        render(null, container);
        reject(new Error('cancel'));
      }
    };
    // 把组件渲染到页面中
    const vnode = createVNode(Confirm, {
      title,
      text,
      cancelCallback,
      submitCallback,
      cancelText,
      submitText,
      type,
      iconShow,
      showClose,
      showCancelButton,
      showHeader,
      confirmLoading,
      showFooter
    });
    // 把虚拟节点渲染DOM中
    render(vnode, container);
  });
};
